<template>
  <div>
    <el-card shadow="never">
      <el-row>
        <el-col :span="20">
          <header-title title="公示菜价管理"></header-title>
        </el-col>
        <el-col :span="4">
          <el-button @click="addDishesPrice" class="button" size="small" round>添加菜品价格</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never">
      <div>
        <el-table :data="dishesPriceData" v-loading="loading" style="width: 100%">
          <el-table-column prop="productName" label="商品名称"></el-table-column>
          <el-table-column prop="price" label="今日菜价(元/千克)"></el-table-column>
          <el-table-column prop="yesterdayPrice" label="昨日菜价(元/千克)"></el-table-column>
          <el-table-column prop="priceTrend" label="环比价格趋势"></el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button @click="editDishesPrice(scope.row)" type="text" style="color:#3dc2c2;">编辑</el-button>
              <el-tooltip content="点一下就直接删除了噢" placement="top">
                <el-button
                  @click="deleteDishesPrice(scope.row)"
                  type="text"
                  style="color:#f7674a;"
                >删除</el-button>
              </el-tooltip>
            </template>
          </el-table-column>
          <div slot="empty">
            <img src="../../../assets/blank_tip_page/blank_tip_page.png" alt />
          </div>
        </el-table>
        <el-pagination
          :page-size="perPage"
          :current-page="page"
          :total="total"
          @current-change="changeDishesPricePage"
          style="margin-top: 15px;"
          background
          layout="prev, pager, next"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog
      title="添加菜品价格"
      :visible.sync="dishesPriceDialog"
      @close="close"
      v-if="dishesPriceDialog"
    >
      <div>
        <el-form :model="modal" label-width="150px" :rules="rules" ref="addform">
          <el-form-item label="商品名称：" prop="productId">
            <my-select
              ref="smySelect"
              url="api/v1/backend/product_price/product_list"
              @selected="mySelectedProductName"
            ></my-select>
          </el-form-item>
          <el-form-item label="商品价格(元/千克)：" prop="price">
            <el-input v-model="modal.price" style="width: 195px;"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitDishesPrice('addform')">提交添加菜价</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改菜品价格" :visible.sync="editDishesPriceDialog" @close="close">
      <div>
        <el-form :model="modal" label-width="150px" :rules="editrules" ref="editform">
          <el-form-item label="商品价格(元/千克)：" prop="price">
            <el-input v-model="modal.price" style="width: 195px;"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEditDishesPrice('editform')">提交修改菜品价格</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import HeaderTitle from "@/components/HeaderTitle";
import MySelect from "@/components/MySelect";
export default {
  name: "PublicDishesPrice",
  components: {
    HeaderTitle,
    MySelect
  },
  data() {
    return {
      loading: true,
      dishesPriceData: [],
      perPage: 10, // 每页显示10条
      page: 1, // 当前页
      total: 0,
      dishesPriceDialog: false,
      modal: {},
      editDishesPriceDialog: false,
      rules: {
        productId: [
          {
            required: true,
            message: "请输入菜品名称",
            trigger: "change"
          }
        ],
        price: [
            { required: true, message: "请输入商品价格", trigger: "change" },
          {
            pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
            message: "商品价格是整数或两位小数",
            trigger: "change"
          }
        ]
      },
      editrules: {
        price: [
           { required: true, message: "请输入商品价格", trigger: "change" },
          {
            pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/,
            message: "商品价格是整数或两位小数",
            trigger: "change"
          }
        ]
      }
    };
  },
  watch: {
    "$store.state.app.marketId"(val, oldVal) {
      this.getDishesPriceList(this.perPage, this.page);
    }
  },
  mounted() {
    this.getDishesPriceList(this.perPage, this.page);
  },
  methods: {
    getDishesPriceList(perPage, page) {
      this.$store
        .dispatch("publicScreenInfo/fetchDishesPriceData", { perPage, page })
        .then(data => {
          this.loading = false;
          this.dishesPriceData = data.items;
          this.total = data.total;
        })
        .catch(err => {
          this.dishesPriceData = [];
          this.total = 0;
        });
    },
    changeDishesPricePage(num) {
      this.page = num;
      this.getDishesPriceList(this.perPage, num);
    },
    // 点击添加菜价
    addDishesPrice() {
      this.dishesPriceDialog = true;
    },
    mySelectedProductName(obj) {
      this.modal = Object.assign({ productId: obj.value }, this.modal);
      console.log(this.modal);
    },
    // 提交添加菜价
    submitDishesPrice(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.dishesPriceDialog = false;
          this.$store
            .dispatch("publicScreenInfo/fetchSubmitDishesPrice", this.modal)
            .then(data => {
              if (data) {
                this.$message({
                  type: "success",
                  message: "添加成功,请刷新!"
                });
              }
              this.close();
              this.getDishesPriceList(this.perPage, this.page);
            })
            .catch(err => {
              this.$message({
                type: "error",
                message: "添加失败，请刷新!"
              });
            });
        } else {
          this.$message.error("有必填项未填");
          return false;
        }
      });
    },
    close() {
      // 清空
      this.modal = {};
    },
    // 点击修改菜价
    editDishesPrice(row) {
      this.productId = row.id;
      this.editDishesPriceDialog = true;
    },
    // 提交修改菜价
    submitEditDishesPrice(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.editDishesPriceDialog = false;
          this.$store
            .dispatch("publicScreenInfo/fetchSubmitEditDishesPrice", {
              id: this.productId * 1,
              price: this.modal.price
            })
            .then(data => {
              if (data) {
                this.$message({
                  type: "success",
                  message: "修改成功，请刷新页面！"
                });
              }
              this.close();
              this.getDishesPriceList(this.perPage, this.page);
            });
        } else {
          this.$message.error("有必填项未填");
          return false;
        }
      });
    },
    // 删除菜价
    deleteDishesPrice(row) {
      const id = row.id;
      this.$store
        .dispatch("publicScreenInfo/fetchDeleteDishesPrice", { id })
        .then(data => {
          if (data) {
            this.$message({
              type: "success",
              message: "删除成功，请刷新页面！"
            });
          }
          this.getDishesPriceList(this.perPage, this.page);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-table__empty-text {
  width: 100%;
}
.button {
  background: #64d9d6;
  color: #fff;
  margin-left: 40px;
}
</style>
